import { Card } from 'antd';
import PropTypes from 'prop-types';

import Dialog from '../common/Dialog';

// 推荐对话框
export default function RecDialog(props) {
    const { title, open, onCancel, footer, children } = props;
    const cards = [
        {
            img: require('@/assets/images/recommendations/广式早茶.jpg'),
            desc: '广式早茶 - 虾饺皇、烧卖、叉烧包等经典茶点',
        },
        {
            img: require('@/assets/images/recommendations/煲仔饭.jpg'),
            desc: '煲仔饭 - 腊味双拼配秘制酱汁，锅巴香脆',
        },
        {
            img: require('@/assets/images/recommendations/双皮奶.jpg'),
            desc: '双皮奶 - 水牛奶制作，口感细腻顺滑',
        },
    ];
    return (
        <Dialog
            title={title}
            dialogOpen={open}
            onCancel={onCancel}
            footer={footer}
            style={{
                width: 600,
                height: 660,
            }}
        >
            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(1, 1fr)',
                    gap: 16,
                    padding: 8,
                    maxHeight: 500,
                    overflowY: 'auto',
                }}
            >
                {cards.map((item, index) => (
                    <Card
                        key={index}
                        hoverable
                        style={{
                            width: '100%',
                            borderRadius: '8px',
                            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
                            marginBottom: 8,
                        }}
                        bodyStyle={{
                            padding: 16,
                            fontSize: 14,
                            color: '#374151',
                        }}
                        cover={
                            <img
                                alt="美食"
                                src={item.img}
                                style={{
                                    width: '100%',
                                    height: 192,
                                    objectFit: 'cover',
                                }}
                            />
                        }
                    >
                        <div
                            style={{
                                textAlign: 'center',
                                lineHeight: '1.5',
                            }}
                        >
                            <h3
                                style={{
                                    fontSize: 18,
                                    fontWeight: 600,
                                    marginBottom: 8,
                                    color: '#1f2937', // 匹配 text-gray-800
                                }}
                            >
                                {item.desc.split(' - ')[0]}
                            </h3>
                            <p
                                style={{
                                    fontSize: 14,
                                    color: '#4b5563', // 匹配 text-gray-600
                                    margin: 0,
                                }}
                            >
                                {item.desc.split(' - ')[1]}
                            </p>
                        </div>
                    </Card>
                ))}
            </div>
        </Dialog>
    );
}

RecDialog.propTypes = {
    title: PropTypes.node,
    open: PropTypes.bool,
    footer: PropTypes.object,
    onCancel: PropTypes.func,
    children: PropTypes.element,
};
